<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>乐友首页-圈子贴吧</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/css/friend/circleBar.min.css?v=<%=$version%>">
</head>
<body>
<div id="circleBar" v-cloak>
    <div class="circleBar-top">
        <span class="goback" @click="getBack()"></span>
        <span class="circleBar-news" @click="getNext(5)"></span>
        <span class="seeIndex-more" @click="getNext(4)"></span>
    </div>
    <div class="circleBar-cent">
        <div class="circleBar-centTop">
            <span class="centTop-head" :style="bgimg(groupInfo.coverImgSrc)" @click="getNext(2)" v-if="state==2"></span>
            <span class="centTop-head" :style="bgimg(groupInfo.coverImgSrc)" v-else></span>
            <div class="centTop-right">
                <h6>{{groupInfo.name}}<strong class="circleBar-up" :class="{'circleBar-up1':!isShow}" @click="getIsshow()"></strong></h6>
                <p>{{groupInfo.categoryName}}<span>&bull;</span>{{groupInfo.userCount}}人</p>
            </div>
            <p v-if="isShow">{{groupInfo.introduction}}</p>
        </div>
        <strong class="circleBar-jrqz" v-if="state==1" @click="joinGroup()"></strong>
        <strong class="circleBar-ql" v-else @click="getNext(1)"></strong>
        <div class="circleBar-centCent">
            <h5>商品<span>{{goodslength}}</span></h5>
            <div class="centCent-top clearfix">
                <span v-for="(item,index) in groupInfo.products" v-if="index<4" :style="bgimg(item.imgSrc)" @click="getNext(6,item.productId)"></span>
                <strong class="centCent-more" @click="getNext(3)"></strong>
            </div>
        </div>
    </div>
    <div class="circleBar-butt">
        <div class="circleBar-buttTop">
            <template v-for="item in groupInfo.posts">
                <p v-if="item.isNotice==1">
                    <span>公告</span>{{item.content}}
                </p>
                <p v-if="item.isTop==1">
                   <span>顶置</span>{{item.content}}
                </p>
            </template>
            <!--<p><span>顶置</span>剪短发了坚实的雷锋精神雷锋剪短发了坚实的雷锋精神雷锋精神了精神了</p>-->
            <!--<p><span>公告</span>剪短发了坚实的雷锋精神雷锋精神了</p>-->
        </div>
        <div class="circleBar-buttTab">
            <span :class="{'active':list.state==1}" @click="getTab(1)">最新评论</span>
            <span :class="{'active':list.state==2}" @click="getTab(2)">最新发表</span>
            <span :class="{'active':list.state==3}" @click="getTab(3)">精华</span>
        </div>
        <div class="circleBar-buttList">
            <!--@click="getPost(item.postId)"-->
            <div class="circleBar-buttImg" v-for="item in circlePost2">
                <div class="circleBar-centTop">
                    <span class="centTop-head" :style="bgimg(item.headImg)"></span>
                    <div class="centTop-right">
                        <h6>{{item.uName}}</h6>
                        <p>{{item.createDate}}</p>
                        <!--<p>友轮一族<span>&bull;</span>152人 @click.stop="getIsScreen(1,item.postId)"</p>-->
                        <strong class="circleBar-up" @click="getIsScreen(1,item.postId)"></strong>
                    </div>
                    <!--
                     type 帖子类型 1写2转发3分享
                      model 类型 1视频，2广告，3游记，4帖子，5圈子，6个人，7城市，8企业，9简历
                    -->
                    <template v-if="item.model==1">
                        <div class="centTop-title" @click="getPost(item.modelId)">
                            <strong class="title-b" v-if="item.isSelected==1">精华</strong>{{{"2":"转发","3":"分享"}[""+item.type]}}{{item.title}}
                            <div class="title-cent">
                                <div class="title-centHead" :style="bgimg(item.coverImgSrc)">
                                    <span class="title-qplay"></span>
                                </div>
                                <div class="title-centTxt">
                                    <div>
                                        <span>{{item.modelName}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.model==2">
                        <div class="centTop-title" @click="getPost(item.modelId)"><strong class="title-b" v-if="item.isSelected==1">精华</strong>{{{"2":"转发","3":"分享"}[""+item.type]}}{{item.title}}</div>
                        <div class="buttImg-video clearfix" :style="bgimg(item.coverImgSrc)">
                            <strong class="adDetails-qplay"></strong>
                            <span>3:01</span>
                        </div>
                    </template>
                    <template v-if="item.model==3">
                        <div class="centTop-title" @click="getPost(item.modelId)">
                            <strong class="title-b" v-if="item.isSelected==1">精华</strong>{{{"2":"转发","3":"分享"}[""+item.type]}}{{item.title}}
                            <div class="title-cent">
                                <div class="title-centHead" :style="bgimg(item.coverImgSrc)">
                                    <span class="title-headtxt">游记</span>
                                </div>
                                <div class="title-centTxt">
                                    <div>
                                        <span>{{item.modelName}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.model==4">
                        <div class="centTop-title" @click="getPost(item.modelId)">
                            <strong class="title-b" v-if="item.isSelected==1">精华</strong>{{{"2":"转发","3":"分享"}[""+item.type]}}{{item.title}}
                            <div class="title-cent">
                                <div class="title-centHead" :style="bgimg(item.coverImgSrc)">
                                </div>
                                <div class="title-centTxt">
                                    <div>
                                        <span>{{item.modelName}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.model==5">

                    </template>
                    <template v-if="item.model==6">
                        <div class="centTop-title" @click="getPost(item.modelId)"><strong class="title-b" v-if="item.isSelected==1">精华</strong>{{{"2":"转发","3":"分享"}[""+item.type]}}{{item.title}}</div>
                    </template>
                    <template v-if="item.model==7">

                    </template>
                    <template v-if="item.model==8">

                    </template>
                    <template v-if="item.model==9">

                    </template>
                    <template v-if="item.model==0">
                        <div class="centTop-title" @click="getPost(item.postId)"><strong class="title-b" v-if="item.isSelected==1">精华</strong>{{{"2":"转发","3":"分享"}[""+item.type]}}{{item.title}}</div>
                        <div class="buttImg-img clearfix" v-if="item.imgList">
                            <strong v-for="item in item.imgList" :style="bgimg(item)"></strong>
                        </div>
                    </template>
                    <!--<p>友轮一族友轮一族友轮一族</p>-->
                    <!--<div class="centTop-html"></div>-->
                    <!--<div class="buttImg-img clearfix">-->
                        <!--<strong></strong>-->
                        <!--<strong></strong>-->
                        <!--<strong></strong>-->
                    <!--</div>-->
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre" @click="getIsScreen(3,item.postId)">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme" @click="getIsScreen(2,item.postId)">{{item.commitCount}}</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz" :class="{'dynamicList-dianz1':item.isPraise==1}" @click="getPraise(item.postId,item.isPraise)">{{item.praiseCount}}</span>
                        </a>
                    </div>
                </div>
            </div>
         <!--   <div class="circleBar-buttImg">
                <div class="circleBar-centTop">
                    <span class="centTop-head"></span>
                    <div class="centTop-right">
                        <h6>友轮一族</h6>
                        <p>2天前</p>
                        &lt;!&ndash;<p>友轮一族<span>&bull;</span>152人 @click.stop="getIsScreen(1,item.postId)"</p>&ndash;&gt;
                        <strong class="circleBar-up"></strong>
                    </div>
                    &lt;!&ndash;<p>友轮一族友轮一族友轮一族</p>&ndash;&gt;
                    <div class="centTop-title">
                        友轮一族友轮一族友轮一族
                        <strong class="title-img"></strong>
                    </div>
                    &lt;!&ndash;<div class="centTop-html"></div>&ndash;&gt;
                    &lt;!&ndash;<div class="buttImg-img clearfix">&ndash;&gt;
                    &lt;!&ndash;<strong></strong>&ndash;&gt;
                    &lt;!&ndash;<strong></strong>&ndash;&gt;
                    &lt;!&ndash;<strong></strong>&ndash;&gt;
                    &lt;!&ndash;</div>&ndash;&gt;
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme">12</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz">45</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="circleBar-buttImg">
                <div class="circleBar-centTop">
                    <span class="centTop-head"></span>
                    <div class="centTop-right">
                        <h6>友轮一族</h6>
                        <p>2天前</p>
                        &lt;!&ndash;<p>友轮一族<span>&bull;</span>152人 @click.stop="getIsScreen(1,item.postId)"</p>&ndash;&gt;
                        <strong class="circleBar-up"></strong>
                    </div>
                    &lt;!&ndash;<p>友轮一族友轮一族友轮一族</p>&ndash;&gt;
                    <div class="centTop-title">
                        友轮一族友轮一族友轮一族
                        &lt;!&ndash;<strong></strong>&ndash;&gt;
                    </div>
                    &lt;!&ndash;<div class="centTop-html"></div>&ndash;&gt;
                    <div class="buttImg-img clearfix">
                        <strong></strong>
                        <strong></strong>
                        <strong></strong>
                    </div>
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme">12</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz">45</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="circleBar-buttImg">
                <div class="circleBar-centTop">
                    <span class="centTop-head"></span>
                    <div class="centTop-right">
                        <h6>色即是空的积分</h6>
                        <p>友轮一族<span>&bull;</span>152人</p>
                        <strong class="circleBar-up"></strong>
                    </div>
                    <div class="centTop-title">
                        友轮一族友轮一族友轮一族
                        <div class="title-cent">
                            &lt;!&ndash;<div class="title-centHead"></div>&ndash;&gt;
                            <div class="title-centTxt">
                                <div>
                                    <span>斯顿就分时间发莱克斯顿就分手了</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    &lt;!&ndash;<div class="buttImg-video clearfix">&ndash;&gt;
                        &lt;!&ndash;<strong class="adDetails-qplay"></strong>&ndash;&gt;
                        &lt;!&ndash;<span>3:01</span>&ndash;&gt;
                    &lt;!&ndash;</div>&ndash;&gt;
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme">12</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz">45</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="circleBar-buttImg">
                <div class="circleBar-centTop">
                    <span class="centTop-head"></span>
                    <div class="centTop-right">
                        <h6>色即是空的积分</h6>
                        <p>友轮一族<span>&bull;</span>152人</p>
                        <strong class="circleBar-up"></strong>
                    </div>
                    <div class="centTop-title">
                        友轮一族友轮一族友轮一族
                        <div class="title-cent">
                            <div class="title-centHead"></div>
                            <div class="title-centTxt">
                                <div>
                                    <span>斯顿就分时间发莱克斯顿就分手了</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    &lt;!&ndash;<div class="buttImg-video clearfix">&ndash;&gt;
                    &lt;!&ndash;<strong class="adDetails-qplay"></strong>&ndash;&gt;
                    &lt;!&ndash;<span>3:01</span>&ndash;&gt;
                    &lt;!&ndash;</div>&ndash;&gt;
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme">12</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz">45</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="circleBar-buttImg">
                <div class="circleBar-centTop">
                    <span class="centTop-head"></span>
                    <div class="centTop-right">
                        <h6>色即是空的积分</h6>
                        <p>友轮一族<span>&bull;</span>152人</p>
                        <strong class="circleBar-up"></strong>
                    </div>
                    <div class="centTop-title">
                        友轮一族友轮一族友轮一族
                        <div class="title-cent">
                            <div class="title-centHead">
                                <span class="title-qplay"></span>
                            </div>
                            <div class="title-centTxt">
                                <div>
                                    <span>斯顿就分时间发莱克斯顿就分手了</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    &lt;!&ndash;<div class="buttImg-video clearfix">&ndash;&gt;
                    &lt;!&ndash;<strong class="adDetails-qplay"></strong>&ndash;&gt;
                    &lt;!&ndash;<span>3:01</span>&ndash;&gt;
                    &lt;!&ndash;</div>&ndash;&gt;
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme">12</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz">45</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="circleBar-buttImg">
                <div class="circleBar-centTop">
                    <span class="centTop-head"></span>
                    <div class="centTop-right">
                        <h6>色即是空的积分</h6>
                        <p>友轮一族<span>&bull;</span>152人</p>
                        <strong class="circleBar-up"></strong>
                    </div>
                    <div class="centTop-title">
                        友轮一族友轮一族友轮一族
                        <div class="title-cent">
                            <div class="title-centHead">
                                <span class="title-headtxt">游记</span>
                            </div>
                            <div class="title-centTxt">
                                <div>
                                    <span>斯顿就分时间发莱克斯顿就分手了</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    &lt;!&ndash;<div class="buttImg-video clearfix">&ndash;&gt;
                    &lt;!&ndash;<strong class="adDetails-qplay"></strong>&ndash;&gt;
                    &lt;!&ndash;<span>3:01</span>&ndash;&gt;
                    &lt;!&ndash;</div>&ndash;&gt;
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme">12</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz">45</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="circleBar-buttImg">
                <div class="circleBar-centTop">
                    <span class="centTop-head"></span>
                    <div class="centTop-right">
                        <h6>色即是空的积分</h6>
                        <p>友轮一族<span>&bull;</span>152人</p>
                        <strong class="circleBar-close">广告</strong>
                    </div>
                    <p>时间发莱克斯顿就分时间发莱克斯顿就分手了就分手了就分手时间发莱克斯顿就分手了就分手了就分手手了就分手了就分手</p>
                    <div class="buttImg-video clearfix">
                        <strong class="adDetails-qplay"></strong>
                        <span>3:01</span>
                    </div>
                    <div class="buttImg-butt clearfix">
                        <a>
                            <span class="discount-spsre">分享</span>
                        </a>
                        <a>
                            <span class="dynamicList-comme1">12</span>
                        </a>
                        <a>
                            <span class="dynamicList-dianz">45</span>
                        </a>
                    </div>
                </div>
            </div>-->
        </div>
        <div class="circleBar-buttVideo"></div>
    </div>
    <div class="selfMediaVd-comment" :class="{'maskShow':isScreen==2}">
        <h6 class="comment-title">
            <strong class="active" @click="getCommentTab(2)">评论</strong>
            <span class="selfMediaVd-paixud" @click="getIsScreen()"></span>
        </h6>
        <div class="comment-cent">
            <div class="comment-list" v-for="item in commentList2">
                <span class="comment-listHead" :style="bgimg(item.headImg)"></span>
                <div class="comment-listRight">
                    <h6>{{item.content}}</h6>
                    <p>{{item.uName}}<span>&bull;</span>{{item.createDate}}</p>
                    <div class="comment-listBtn">
                        <span :class="{'1':'selfMediaVd-good1','0':'selfMediaVd-good'}[''+item.praiseState]" @click="praiseMediaAdvComment(item.praiseState,item.commentId)">{{item.praiseCount}}</span>
                        <!--<span class="selfMediaVd-spcha">45</span>-->
                        <span class="selfMediaVd-sppl" @click="getCommentInfo(item.commentId)">{{item.commentCount}}</span>
                        <span class="selfMediaVd-more1"></span>
                    </div>
                    <span class="comment-listButt" v-if="item.commentCount>0" @click="getCommentInfo(item.commentId)">查看<span>{{item.commentCount}}</span>条回复</span>
                </div>
            </div>
            <!--<div class="comment-list">-->
            <!--<span class="comment-listHead"></span>-->
            <!--<div class="comment-listRight">-->
            <!--<h6>拍的不错，调色不是很好，色不是很好</h6>-->
            <!--<p>Jolie白其<span>&bull;</span>刚刚发布</p>-->
            <!--<div class="comment-listBtn">-->
            <!--<span class="selfMediaVd-good1">152</span>-->
            <!--<span class="selfMediaVd-spcha">45</span>-->
            <!--<span class="selfMediaVd-sppl">44</span>-->
            <!--<span class="selfMediaVd-more1"></span>-->
            <!--</div>-->
            <!--<span class="comment-listButt">查看<span>12</span>条回复</span>-->
            <!--</div>-->
            <!--</div>-->
            <div class="loadtip" v-if="loadFlag"></div>
        </div>
        <div class="comment-butt">
            <span class="selfMediaVd-wirt"></span>
            <input type="text" v-model="commentText" placeholder="我来说两句...">
            <span class="selfMediaVd-send" @click="comment()">发送</span>
        </div>
    </div>
    <div id="mask1" :class="{'maskShow':isScreen}"></div>
    <div id="isClose" :class="{'maskShow':isScreen==1}">
        <span @click="getIsClassify(1)">删除</span>
        <span @click="getIsScreen()">取消</span>
    </div>
    <div id="maskBox" :class="{'maskShow':isScreen==3}">
        <div class="maskBox-top">分享到</div>
        <div class="maskBox-cent">
            <span class="maskBox-icon" @click="getChoice(1)">好友</span>
            <!--<span class="maskBox-icon1" @click="getChoice(2)">圈子</span>-->
        </div>
        <div class="maskBox-btn" @click="getIsScreen()">取消</div>
    </div>
    <pop-view v-show="pop.show" @on="getIsClassify()" :question="pop.question" @ok="deletePost()"></pop-view>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/js/friend/circleBar.js?v=<%=$version%>"></script>

</body>
</html>